<template>
    <div class="quiz-data-search">
        <div class="top">
            <div class="logo">问题库搜索</div>
            <div class="search-input">
                <el-input
                    v-model="input"
                    placeholder="请输入内容"
                    @keyup.native.enter="searchClick"
                ></el-input>
                <div class="search-but" @click="searchClick">搜索</div>
            </div>
        </div>
        <div class="main">
            <div class="main-left">
                <div class="title">筛选条件</div>
                <div class="screen">
                    <div
                        class="screen-item"
                        :class="{ active: retrieveFieldsIndex == 1 }"
                        @click="checkScreen(1, 'retrieveFieldsIndex')"
                    >
                        标题搜索
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: retrieveFieldsIndex == 0 }"
                        @click="checkScreen(0, 'retrieveFieldsIndex')"
                    >
                        全文搜索
                    </div>
                </div>
                <div class="screen">
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 0 }"
                        @click="dateCheck(0)"
                    >
                        全部时间
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 30 }"
                        @click="dateCheck(30)"
                    >
                        一个月内
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 90 }"
                        @click="dateCheck(90)"
                    >
                        三个月内
                    </div>
                    <div
                        class="screen-item"
                        :class="{ active: dateFilterate == 365 }"
                        @click="dateCheck(365)"
                    >
                        一年内
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-right-top">
                    <div>
                        共搜索到
                        <span>{{ total }}</span>
                        条相关结果
                    </div>
                    <div>
                        排序选择：
                        <span @click="checkSort">
                            发文日期
                            <i
                                v-show="sortPushDate === null"
                                class="el-icon-d-caret"
                            ></i>
                            <i
                                v-show="sortPushDate === 0"
                                class="el-icon-caret-top"
                            ></i>
                            <i
                                v-show="sortPushDate === 1"
                                class="el-icon-caret-bottom"
                            ></i>
                        </span>
                    </div>
                </div>
                <div class="result-list" v-loading="loading">
                    <nuxt-link
                        v-for="(item, index) in pageDataList"
                        :key="index"
                        class="result-item"
                        :to="`/quizdata/${item.quizData.id}.html`"
                        target="_blank"
                    >
                        <div
                            class="result-item-title"
                            v-html="item.quizData.title"
                        ></div>
                        <div
                            class="result-item-content"
                            v-html="item.quizData.answer_content"
                        ></div>
                        <div class="result-item-date">
                            {{ getTime(item.quizData.createtime * 1000) }}
                        </div>
                    </nuxt-link>

                    <div v-if="pageDataList.length == 0" class="empty">
                        <el-empty description="未搜索到相关内容"></el-empty>
                    </div>

                    <div v-show="total > limit" class="page">
                        <el-pagination
                            background
                            layout="prev, pager, next, jumper"
                            :total="total"
                            :page-size="limit"
                            :current-page.sync="page"
                            @current-change="currentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { quizSearch } from "@/assets/api/searchApi";
import {
    readJsonFileContent,
    getText,
    goTopSmooth,
    answerFormat,
    getTime2,
} from "@/assets/utils/utils";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

var quizDataList = [];
export default {
    name: "QuizDataSearch",
    components: {},

    metaInfo() {
        return {
            title: this.mateInfo.title + "搜索结果-【小竹财税平台】",
            meta: [
                {
                    name: "keywords",
                    content: "小竹财税问题库",
                },
            ],
        };
    },
    layout: "home",
    head() {
        return {
            title: this.mateInfo.title + "搜索结果-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问题库",
                },
            ],
        };
    },
    data() {
        return {
            retrieveFields: ["answer_content", "title"],
            retrieveFieldsIndex: 1,

            input: "",
            mateInfo: {
                title: "",
                keywords: "",
                description: "",
            },

            sortPushDate: null, // 升序：0，降序：1
            dateFilterate: 0,

            limit: 15,
            page: 1,
            total: 0,
            pageDataList: [],

            loading: false,

            queryKeywords: [],

            getTime: getTime2,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {},
    mounted() {
        this.input = this.$route.query.k;
        this.mateInfo.title = this.input;
        this.page = 1;
        if (this.input) {
            this.quizSearch();
            getanalysedata2({
                m_id: 1,
                type: 1,
                code: "PB2",
                describe: "搜索-" + this.input,
            });
        }
    },
    watch: {},
    methods: {
        searchClick() {
            if (!this.input) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            this.date = "";
            this.dateFilterate = 0;
            this.mateInfo.title = this.input;
            this.sortPushDate = null;
            this.page = 1;
            this.$router.push({
                path: "/quizdata/search",
                query: {
                    k: this.input,
                },
            });
            getanalysedata2({
                m_id: 1,
                type: 1,
                code: "PB2",
                describe: "搜索-" + this.input,
            });
            this.quizSearch();
        },

        async quizSearch() {
            if (!this.input) {
                this.input = this.$route.query.k;
            }
            if (this.loading) return;
            this.loading = true;

            this.mateInfo.title = this.input;
            let params = {
                query: this.input,
                retrieveFields:
                    this.retrieveFieldsIndex == 0
                        ? this.retrieveFields
                        : [this.retrieveFields[1]],
                page: this.page,
                pageSize: this.limit,
            };
            if (this.sortPushDate !== null)
                params.sortList = [{ createtime: this.sortPushDate }];
            if (this.date) {
                params.dateScope = {
                    startDate: this.date[0],
                    endDate: this.date[1],
                };
            }
            const res = await quizSearch(params);
            if (res.status == 0) {
                this.total = res.data.resultTotal;
                this.queryKeywords = res.data.queryKeywords;
                quizDataList = res.data.result;

                this.getPageData();
            }
        },

        // 切换筛选条件
        checkScreen(index, key) {
            this[key] = index;
            this.page = 1;
            this.quizSearch();
        },

        // 切换排序
        checkSort() {
            if (this.sortPushDate === null) this.sortPushDate = 1;
            else if (this.sortPushDate === 1) this.sortPushDate = 0;
            else if (this.sortPushDate === 0) this.sortPushDate = null;
            this.page = 1;
            this.quizSearch();
        },

        // 日期筛选
        dateCheck(num) {
            if (this.dateFilterate == num) return;
            this.page = 1;
            this.dateFilterate = num;
            if (num == 0) {
                this.date = "";
                this.quizSearch();
                return;
            }
            this.date = [
                new Date(new Date().getTime() - num * 24 * 60 * 60 * 1000)
                    .toISOString()
                    .split("T")[0], //一个月前
                new Date().toISOString().split("T")[0], //当前日期
            ];
            this.quizSearch();
        },

        // 取到当前分页的数据
        async getPageData() {
            for (let item of quizDataList) {
                let data = await readJsonFileContent(item.matchDataUrl);
                data.data.answer_content = getText(
                    data.data.answer_content,
                    120
                );
                item.quizData = {
                    ...data.data,
                };
            }
            this.pageDataList = answerFormat(
                quizDataList,
                this.queryKeywords,
                this.retrieveFieldsIndex
            );
            this.$nextTick(() => {
                this.loading = false;
                goTopSmooth();
            });
        },

        currentChange(page) {
            if (this.loading) return;
            this.page = page;
            goTopSmooth();
            this.quizSearch();
        },

        goDetail(item) {},
    },
};
</script>

<style lang="scss" scoped>
.quiz-data-search {
    background-color: #f7fbff;
    padding: 30px 0;
}

.top {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
        color: #333333;
        font-weight: 600;
        font-size: 26px;
    }
    .search-input {
        display: flex;
        align-items: center;
        &::v-deep .el-input__inner {
            width: 888px;
            height: 57px;
            background: #ffffff;
            border: 2px solid #1c87f3;
            position: relative;
            right: -16px;
            border-radius: 4px 0 0 4px;
            padding: 0 26px;
        }
        .search-but {
            width: 133px;
            height: 57px;
            background: #2e94f7;
            border-radius: 0 4px 4px 0;
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            line-height: 57px;
            user-select: none;
            cursor: pointer;
            &:hover {
                opacity: 0.8;
            }
            &:active {
                opacity: 1;
            }
        }
    }
}

.main {
    width: 1200px;
    margin: 30px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.main-left {
    box-sizing: border-box;
    width: 216px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    padding: 20px 23px;
    .title {
        padding-left: 20px;
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: 500;
        color: #666666;
        border-bottom: 1px solid #f1f1f1;
    }
    .screen {
        padding-top: 19px;
        .screen-item {
            padding-left: 20px;
            font-size: 14px;
            color: #666666;
            border-left: 3px solid transparent;
            height: 40px;
            line-height: 40px;
            user-select: none;
            cursor: pointer;
        }
        .active {
            border-left-color: #077bfe;
            background: #f5faff;
            color: #077bfe;
        }
    }
}

.main-right {
    width: 964px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    padding: 25px 30px;
    .main-right-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 25px;
        border-bottom: 1px solid #e4e4e4;
        div {
            font-size: 16px;
            color: #999999;
            span {
                color: #333333;
                padding: 0 2px;
                cursor: pointer;
            }
        }
    }
    .result-list {
        min-height: 520px;
        padding-top: 25px;
        .result-item {
            padding: 0 10px 20px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 22px;
            box-sizing: border-box;
            display: block;
            cursor: pointer;
            &:hover {
                .result-item-title {
                    color: #077bfe;
                    text-decoration: underline;
                }
            }
            > div {
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
                -webkit-line-clamp: 2; /* 限定显示的行数，这里设置为3行 */
                -webkit-box-orient: vertical; /* 这使得display:-webkit-box生效 */
                display: -webkit-box; /* 作为flex容器的webkit版本 */
                white-space: normal;
            }
            .result-item-title {
                font-weight: 600;
                font-size: 16px;
                color: #222222;
                line-height: 24px;
                margin-bottom: 10px;
            }
            .result-item-content {
                font-size: 14px;
                color: #666666;
                line-height: 22px;
            }

            .result-item-date {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                padding-top: 16px;
            }
        }

        .empty {
        }

        .page {
            text-align: center;
            padding: 20px 0;
        }
    }
}
::v-deep em {
    color: red !important;
}
</style>./search.vue
